<template>
    <div ref="stackBarRef"></div>
  </template>
  <script>
  export default {
    props: {
      unit: {
        type: String,
        default: "单位：（艘）"
      },
      resultData: {
        type: Array,
        default: () => {
          return [
            {
              name: "工作船",
              data: [
                {
                  name: "总数",
                  value: 324
                },
                {
                  name: "出航数",
                  value: 124
                },
                {
                  name: "设备装备数",
                  value: 124
                }
              ]
            },
            {
              name: "社会船",
              data: [
                {
                  name: "总数",
                  value: 122
                },
                {
                  name: "在航数量",
                  value: 122
                },
                {
                  name: "停船数量",
                  value: 122
                }
              ]
            }
          ];
        }
      },
      color: {
        type: Array,
        default: () => {
          return ["#4d88ff", "#fecc37", "#3ae6ff", "#fccc30"];
        }
      }
    },
    data() {
      return {
        series: [],
        yAxis: []
      };
    },
    mounted() {
      this.initOption();
    },
    methods: {
      toRGB(color, opacity) {
        if (!/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(color)) return;
        const chars = color.split("").splice(1);
        const r = `0x${chars[0]}${chars[1]}`;
        const g = `0x${chars[2]}${chars[3]}`;
        const b = `0x${chars[4]}${chars[5]}`;
        return `rgba(${parseInt(r)},${parseInt(g)},${parseInt(b)},${
          typeof opacity === "number" ? opacity : "1"
        })`;
      },
      setSeries({ name, data, type = "bar" }, i) {
        const color = this.color;
        const color2 = this.color;
        const that = this;
        data.forEach(o => {
          if (that.yAxis.indexOf(o.name) === -1) {
            that.yAxis.push(o.name);
          }
        });
        that.series.push({
          name: name,
          stack: name,
          type: type,
          barMinWidth: 8,
          barMaxWidth: 10,
          label: {
            show: true,
            position: "top",
            borderColor: "transparent",
            borderWidth: 0,
            fontSize: 16,
            color: "#fff",
            shadowColor: "transparent",
            fontFamily: "YouSheBiaoTiHei"
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              { offset: 0, color: color2[i] },
              { offset: 0.985, color: that.toRGB(color[i], 0.1) },
              { offset: 0.985, color: that.toRGB(color[i], 1) },
              { offset: 1, color: that.toRGB(color[i], 1) }
            ])
          },
          data: data
        });
      },
      initOption() {
        const that = this;
        var chartDom = that.$refs.stackBarRef;
        var myChart = echarts.init(chartDom);
        that.series = [];
        that.yAxis = [];
  
        that.resultData.forEach((o, i) => {
          that.setSeries(o, i);
        });
        const option = {
          title: {
            subtext: that.unit,
            top: -5,
            left: 5,
            subtextStyle: {
              color: "#ffffff",
              fontSize: 16,
              fontWeight: 600
            }
          },
          color: that.color,
          tooltip: {
            trigger: "axis",
            textStyle: {
              align: "left"
            },
            axisPointer: {
              // Use axis to trigger tooltip
              type: "shadow" // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          legend: {
            align: "right",
            right: 0,
            itemHeight: 8,
            itemWidth: 20,
            show: false,
            textStyle: {
              color: "#fff"
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "4%",
            top: 40,
            containLabel: true
          },
          yAxis: {
            type: "value",
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(133,194,255,.5)"
              }
            },
            boundaryGap: ["0", "40%"],
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(58,112,197,.12)"
              }
            },
            splitNumber: 2,
            axisLabel: {
              color: "#ffffff"
            },
            splitArea: {
              show: false,
              areaStyle: {
                color: "rgba(58,112,197,.1)"
              }
            }
          },
          xAxis: {
            type: "category",
            data: that.yAxis,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(133,194,255,.5)"
              }
            },
            axisLabel: {
              color: "#ffffff",
              interval: 0,
              width: 80,
              overflow: "truncate",
              ellipsis: "..."
            }
          },
          series: that.series
        };
        option && myChart.setOption(option, true);
        myChart.off("click");
        myChart.on("click", function (params) {});
      }
    }
  };
  </script>
  <style lang="less" scoped></style>
  